import { View } from "@tarojs/components";
import styles from "./index.module.scss";
import { AtButton } from "taro-ui3";
import { useState } from "react";

interface FollwLabelProps {
  id: number;
  label: string;
}

const FollowLabel = (props: FollwLabelProps) => {
  const [checked, setChecked] = useState<boolean>(false);
  const { label = "" } = props;
  const select = () => {
    setChecked(!checked);
  };
  return (
    <View
      onClick={select}
      className={`${styles["fllow-label"]} ${
        checked ? styles["fllow-label-active"] : ""
      }`}
    >
      {label}
    </View>
  );
};

const FollowLabels = () => {
  const [follwLabels, setFollwLabels] = useState<FollwLabelProps[]>([
    { id: 1, label: "男粉丝" },
    { id: 2, label: "女粉丝" },
    { id: 3, label: "中性粉丝" },
    { id: 4, label: "中性粉丝" },
  ]);

  const submit = () => {
    console.log("submit");
  };

  return (
    <View className={styles["fllow-label-container"]}>
      <View>
        <View className={styles["title"]}>欢迎回来</View>
        <View className={styles["sub-title"]}>选择您喜欢的粉丝类型</View>
      </View>
      <View className={styles["fllow-labels"]}>
        {follwLabels.map((item) => (
          <FollowLabel key={item.id} {...item} />
        ))}
      </View>
      <AtButton className={styles["submit-btn"]} onClick={submit}>
        确定
      </AtButton>
    </View>
  );
};

export default FollowLabels;
